<template>
  <div>
    <div class="flex justify-between items-center pr-4 py-2 bg-white">
      <LayoutBreadcrumb class="grow" />
    </div>
    <div class="mt-2 p-2 bg-white">
      <thisSearch @action="onSearch" ref="search" />
    </div>
    <div class="mt-2 px-4">
      <this-dtu :dtu="dtu" v-if="dtu" @updated="onSearch" @on-delete="onDelete" />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { LayoutBreadcrumb } from '../../../layouts/default/header/components';
import { ref } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import thisDtu from './dtu.vue';
import { defHttp } from '/@/utils/http/axios';
import thisSearch from './search.vue';
import { message } from 'ant-design-vue';

export default defineComponent({
  components: { LayoutBreadcrumb, PlusOutlined, thisDtu, thisSearch },
  setup() {
    const dtu = ref();
    const search = ref();

    function onSearch() {
      const { projectId, dtuId } = search.value.formState;
      defHttp.get({ url: `/project/get-sensor-topo?id=${projectId}` }).then((res) => {
        dtu.value = res.data.dtuTopoList.find((item) => item.id === dtuId);
      });
    }

    function onDelete(node) {
      // let device = ['dtu', 'gather-device', 'sensor'][node.typye];
      defHttp.post({ url: `/${node.type}/delete`, params: { id: node.id } }).then((res) => {
        message.success('操作成功');
        onSearch();
      });
    }

    return {
      onSearch,
      dtu,
      search,
      onDelete,
    };
  },
});
</script>
